<template>
  <div class="s-arrival">
    <p class="desc">Sand painting has a unique charm of performance, can make the audience into the fantastic feeling and hitherto unknown visual enjoyment. Sand painting is enjoyable, natural, full of natural beauty, and, a fall, Yima, a hook, a pick, a beat. Practices are very expressive and appealing.</p>
    <div class="main clearfix">
      <div class="main__img"></div>
      <div class="main__desc">
        <ul class="tabs">
          <li :class="{tab: true, active: viewActive[0]}" @click="onTab(0)">
            <p>This page about the company qualification?</p>
          </li>
          <li :class="{tab: true, active: viewActive[1]}" @click="onTab(1)">
            <p>What programs are available?</p>
          </li>
          <li :class="{tab: true, active: viewActive[2]}" @click="onTab(2)">
            <p>What's the social life like?</p>
          </li>
          <li :class="{tab: true, active: viewActive[3]}" @click="onTab(3)">
            <p>What benefits do I get?</p>
          </li>
          <li :class="{tab: true, active: viewActive[4]}" @click="onTab(4)">
            <p>What are the requirements for teaching with i2?</p>
          </li>
          <li :class="{tab: true, active: viewActive[5]}" @click="onTab(5)">
            <p>What costs are associated with i2?</p>
          </li>
        </ul>
        <div class="views">
          <transition-group name="fade" mode="out-in">
            <div key="0" class="view" v-if="viewActive[0]">
              <p>Temporary text</p>
              <p>i2 will provide you with temporary housing and will help you find housing afterward. Don't worry! i2 is here to help you every step of the way, from finding an apartment, communicating with landlords, to signing a contract.</p>
              <p>Initially you're responsible for paying for your flight to China, but i2 will reimburse you within six months of your employment. You also need to get your working visalife in China.</p>
            </div>
            <div key="1" class="view" v-if="viewActive[1]">
              <p>Temporary text</p>
              <p>i2 wi.</p>
            </div>
            <div key="2" class="view" v-if="viewActive[2]">
              <p>Temporary text</p>
              <p>xxxx</p>
            </div>
          </transition-group>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        viewActive: [true, false, false, false, false]
      }
    },
    methods: {
      onTab(index) {
        this.viewActive = this.viewActive.map((v, i) => {
          return i === +index
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .desc {
    font-size: 14px;
    color: #515151;
    margin-top: 20px;
    margin-bottom: 45px;
  }

  .main__img {
    float: left;
    width: 422px;
    height: 647px;
    background: url("../../assets/support/support_slide_1.jpg") 0 0 no-repeat;
    box-shadow: 15px 20px 70px 0 rgba(0, 0, 0, .2);
  }

  .main__desc {
    float: right;
    padding-left: 68px;
    padding-top: 54px;
    width: calc(100% - 422px);
    box-sizing: border-box;
  }

  .tabs {
    .tab {
      cursor: pointer;
      font-size: 16px;
      color: #231815;
      &:hover,
      &.active {
        color: #800000;
      }
    }
  }
  .views {
    position: relative;
    margin-top: 58px;
    .view {
      position: absolute;
      top: 0;
      left: 0;
      color: #515151;
      font-size: 14px;
      line-height: 1.8;
    }
  }

  .fade-enter-active,
  .fade-leave {
    opacity: 1;
    transition: all .3s;
  }
  .fade-enter,
  .fade-leave-active {
    opacity: 0;
    transition: all .3s;
  }
</style>
